
import axios from 'axios'

import Header from './components/Header.js'
import {Row,Col,Breadcrumb} from 'antd'
import Advert from './components/Advert'
import Footer from './components/Footer'
import Author from './components/Author.js';
import './static/style/pages/detail.css'
import 'markdown-navbar/dist/navbar.css'
import marked from 'marked'
//代码高亮
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'
import Tocify from './components/tocify.tsx'

import {
  CalendarOutlined,
  FolderOutlined,
  FireOutlined,
} from '@ant-design/icons';

import React, { Component } from 'react'

export default class Detail extends Component {
  constructor(){
    super()
    this.state={
      mylist:[]
    }
  }
  //这个函数会在构造之后和render之前执行
  componentDidMount (){
    let id = this.props.match.params.id
    const tocify = new Tocify()
    const renderer = new marked.Renderer()
    renderer.heading = function(text, level, raw) {
      const anchor = tocify.add(text, level);
      return `<a id="${anchor}" href="#${anchor}" class="anchor-fix"><h${level}>${text}</h${level}></a>\n`;
    };
    marked.setOptions({
      renderer:renderer,
      //启动github的渲染方式
      gfm:true,
      //允许代码是写错的
      pedantic:false,
      //是否忽略html标签
      sanitize:false,
      //是否允许输出表格样式
      tables:true,
      breaks:false,
      //美化列表
      smartLists:true,
      //高亮的标准
      highlight:function(code){
        return hljs.highlightAuto(code).value
      }
    })
    axios('http://127.0.0.1:7001/default/getArticleById/'+id).then(
        (res)=>{
          this.setState({
            html: marked(res.data.data[0].content),
            mylist:res.data.data[0],
          })
        }
      ).catch(function (error) {
            console.log(error);
        })
    
  }
  render() {
    return (
    <div>
      <Header></Header>
      <Row className="comm-main" type="flex" justify="center">
        <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}>
          <div>
            <div className='bread-div'>
              <Breadcrumb>
                <Breadcrumb.Item ><a href='/'>首页</a></Breadcrumb.Item>
                <Breadcrumb.Item ><a>视频教程</a></Breadcrumb.Item>
                <Breadcrumb.Item >XXX</Breadcrumb.Item>
              </Breadcrumb>
            </div>
            <div>
              <div className='detailed-title'>
                {this.state.mylist.title}
              </div>
              <div className='list-icon center'>
                <span><CalendarOutlined />{this.state.mylist.addTime}</span> &nbsp;
                <span><FolderOutlined />{this.state.mylist.typeName}</span>&nbsp;
                <span><FireOutlined />{this.state.mylist.view_count}</span>&nbsp;
              </div>
              <div className='detailed-content'
                dangerouslySetInnerHTML={{__html:this.state.html}}
              >
              </div>
            </div>
          </div>

        </Col>
        <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
          <Author></Author>
          <Advert></Advert>
          <div className='detailed-nav comm-box'>
            <div className='nav-title'>文章目录</div>
            {this.tocify && this.tocify.render()}
          </div>
        </Col>
      </Row>
      <Footer></Footer>
    </div>
    )
  }
}

